<template>
	<m-block gap="20 20 0" class="pay-type" title="在线支付" v-if="!isEmpty(payList)">
		<radio-group v-model="payType" class="pay-box">
			<template v-for="(item,key) in payList">
				<template v-if="filterArr.indexOf(Number(key)) == -1">
					<view :key="key" class="label flex-between" @click="setIdx(key,1)">
						<view class="left flex">
							<m-icon wh="48" color="#06B4FD" spa="8 24 0 0" :type="payIcon(item)" />
							<view class="box">
								<view class="flex">
									<text class="title">{{item}} </text>
								</view>
								<!-- <template >
									<text class="balance">可用余额:{{userbalance[key]['balance'] || 0}}</text>
								</template> -->
								<!-- template v-if="key==2">
									<text class="balance">可用余额:{{userbalance[2]['balance'] || 0}}</text>
								</template> -->
								<template v-if="key==1">
									<text class="balance">可用余额：{{userbalance[1]['balance'] || 0}}</text>
								</template>
							</view>
						</view>
						<view class="right flex">
							<template v-if="key == value['payType'] && value['type'] == 1">
								<m-icon wh="40" color="var(--theme)" type="icon-xuanzhong_-01" />
							</template>
							<template v-else>
								<m-icon wh="40" color="#999999" type="icon-weixuanzhong_-01-01" />
							</template>
						</view>
					</view>
				</template>
			</template>
		</radio-group>
	</m-block>
</template>

<script>
	import { isEmpty, number } from '@/libs/fn/verify.js'
	import { mapState } from 'vuex'
	export default {
		name: "payList",
		data() {
			return {
				bankList: [],
				payType: 1,
			};
		},
		props: {
			value: {
				type: [Number, String, Object],
				default: 0
			},
			//过滤  不显示
			filterArr: {
				type: Array,
				default: () => []
			},

		},
		computed: {
			...mapState({
				enum: state => state.general.enum,
				config: state => state.general.config,
				userbalance: state => state.user.userbalance,
				bankCardList: state => state.user.bankCardList,
			}),
			onlyArr() {
				try {
					let a = this.config[888].split(',')
					return a.map(item => {
						return Number(item)
					}, [])
				} catch (e) {
					return []
					//TODO handle the exception
				}

			},

			payList() {
				let list = this.enum['PayType'];
				if (this.onlyArr.length > 0) {
					const a = {};
					for (let item in list) {
						if (this.onlyArr.indexOf(Number(item)) != -1) {
							a[item] = list2[item]
						}
					}
					return a
				}
				return list
			},
			isEmpty() {
				return isEmpty
			},
		},
		watch: {
			payType(val) {
				this.$emit('input', val);
			},
		},
		methods: {
			payIcon(e) {
				if (e.includes('支付宝')) {
					return 'zfb'
				}
				if (e.includes('微信')) {
					return 'wx'
				}
				return 'ye'
			},
			setIdx(key, type) {
				this.payType = {
					payType: key,
					type: 1
				};
				this.$emit('input', {
					payType: key,
					type: 1
				});
			},
		},
	}
</script>

<style lang="scss">
	.pay-box {
		.label {
			padding: 30rpx 0;

			.left {
				.title {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.balance {
					display: inline-block;
					padding-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.addBank {
			padding: 20rpx 0;

			text {
				padding-left: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #959595;
			}
		}

		.label+.label {
			border-top: 1rpx solid var(--border);
			padding-top: 30rpx;
		}
	}
</style>